<template>
	<view class="quick-actions-container" :class="{ 'visible': isVisible }">
		<!-- 自定义遮罩层 -->
		<view class="mask" @click="close" :class="{ 'mask-visible': isVisible }"></view>

		<!-- 快捷操作菜单 -->
		<view class="quick-actions" :class="{ 'actions-visible': isVisible }">
			<view class="grid-list">
				<!-- 添加整租 -->
				<view class="grid-item" @click="handleAction('addRent')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/personal_care.svg" mode="aspectFit"></image>
					<text>添加整租</text>
				</view>
				<!-- 添加合租 -->
				<view class="grid-item" @click="handleAction('addShare')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/second_hand.svg" mode="aspectFit"></image>
					<text>添加合租</text>
				</view>
				<!-- 添加独栋 -->
				<view class="grid-item" @click="handleAction('addBuilding')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/agriculture.svg" mode="aspectFit"></image>
					<text>添加独栋</text>
				</view>
				<!-- 添加规定 -->
				<view class="grid-item" @click="handleAction('addRule')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/healthcare.svg" mode="aspectFit"></image>
					<text>添加规定</text>
				</view>
				<!-- 租客登记 -->
				<view class="grid-item" @click="handleAction('tenantRecord')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/clothing.svg" mode="aspectFit"></image>
					<text>租客登记</text>
				</view>
				<!-- 业主登记 -->
				<view class="grid-item" @click="handleAction('ownerRecord')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/local_life.svg" mode="aspectFit"></image>
					<text>业主登记</text>
				</view>
				<!-- 新房线索 -->
				<view class="grid-item" @click="handleAction('newHouseLead')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/baby_pet.svg" mode="aspectFit"></image>
					<text>新房线索</text>
				</view>
				<!-- 新客线索 -->
				<view class="grid-item" @click="handleAction('newCustomerLead')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/automobile.svg" mode="aspectFit"></image>
					<text>新客线索</text>
				</view>
				<!-- 添加记账 -->
				<view class="grid-item" @click="handleAction('addAccount')" :class="{ 'item-visible': isVisible }">
					<image src="/static/tabbar/midButton/shoes_bags.svg" mode="aspectFit"></image>
					<text>添加记账</text>
				</view>
			</view>
			<!-- 取消按钮 -->
			<uni-icons class="cancel-icon" type="closeempty" color="#666666" @click="close"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	name: 'QuickActions',
	data() {
		return {
			isVisible: false
		}
	},
	methods: {
		show() {
			this.isVisible = true
			// 阻止页面滚动
			document.body.style.overflow = 'hidden'
		},
		close() {
			this.isVisible = false
			// 恢复页面滚动
			document.body.style.overflow = ''
		},
		handleAction(type) {
			// 处理各种操作的路由跳转
			const routeMap = {
				addRent: '/pages/house/add-rent',
				addShare: '/pages/house/add-share',
				addBuilding: '/pages/house/add-building',
				addRule: '/pages/rule/add',
				tenantRecord: '/pages/tenant/record',
				ownerRecord: '/pages/owner/record',
				newHouseLead: '/pages/house/new-lead',
				newCustomerLead: '/pages/customer/new-lead',
				addAccount: '/pages/account/add'
			}

			if (routeMap[type]) {
				uni.navigateTo({
					url: routeMap[type]
				})
			}
			this.close()
		}
	}
}
</script>

<style lang="scss" scoped>
.quick-actions-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	pointer-events: none;

	&.visible {
		pointer-events: auto;
	}
}

.mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all 0.3s ease;

	&.mask-visible {
		background-color: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
}

.quick-actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -100%;
	padding: 126rpx 126rpx 0 126rpx;

	&.actions-visible {
		bottom: 0;
	}

	.grid-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		padding: 20rpx 0;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transform: translateY(100rpx);
			opacity: 0;
			// 增加动画时间和更明显的曲线
			transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;

			&.item-visible {
				transform: translateY(0);
				opacity: 1;
			}

			@for $i from 1 through 9 {
				&:nth-child(#{$i}) {
					// 从右到左的延迟，每行从右到左
					$col: $i % 3;
					$row: floor(($i - 1) / 3);
					$delay: 0.15s * (2 - $col) + 0.1s * $row;
					transition-delay: $delay;
				}
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
			}

			text {
				font-size: 20rpx;
				color: #333333;
			}
		}
	}

	.cancel-icon {
		margin: 30rpx auto;
		width: fit-content;
		display: block;
		transition: transform 0.3s ease;

		&:active {
			opacity: 0.7;
			transform: rotate(90deg);
		}
	}
}
</style>